<!--
 * @Author: xuhy 1727317079@qq.com
 * @Date: 2022-09-04 09:48:48
 * @LastEditors: xuhy 1727317079@qq.com
 * @LastEditTime: 2022-09-15 20:35:39
 * @FilePath: \vue3_test\src\App.vue
 * @Description: 父组件
-->
<template>
  <div class="app">
    <h3>我是App组件(祖), {{ name }}---{{ price }}</h3>
    <ChildOne></ChildOne>
  </div>
</template>

<script>
import { reactive, toRefs, provide } from "vue";
import ChildOne from "./components/ChildOne";
export default {
  name: "APP",
  components: { ChildOne },
  setup() {
    let car = reactive({
      name: "奔驰",
      price: "40W",
    });

    provide("car", car); // 给自己的后代组件传递数据
    
    return {
      ...toRefs(car),
    };
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
